<template>
  <div class="practice-content">
    <div class="page-header">
      <h1 class="page-title">💪 练习中心</h1>
      <p class="page-subtitle">根据已学知识进行巩固练习</p>
    </div>

    <div class="entry-grid">
      <router-link class="entry-card quick" to="/smart-recommend">
        <div class="entry-icon">⚡</div>
        <div class="entry-title">快速开始</div>
        <div class="entry-desc">系统基于掌握度与遗忘曲线智能出题，一键进入练习</div>
      </router-link>

      <router-link class="entry-card manual" to="/learn">
        <div class="entry-icon">🧭</div>
        <div class="entry-title">自主选择</div>
        <div class="entry-desc">先选择分类/知识点与模式，再开始针对性练习</div>
      </router-link>
    </div>

    <!-- 练习统计 -->
    <div class="practice-stats">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <div class="stat-value">{{ practiceStats.totalQuestions }}</div>
            <div class="stat-label">总题数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">✅</div>
          <div class="stat-content">
            <div class="stat-value">{{ practiceStats.correctRate }}%</div>
            <div class="stat-label">正确率</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🔥</div>
          <div class="stat-content">
            <div class="stat-value">{{ practiceStats.streakDays }}</div>
            <div class="stat-label">连续天数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">⏱️</div>
          <div class="stat-content">
            <div class="stat-value">{{ practiceStats.avgTime }}</div>
            <div class="stat-label">平均用时</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近练习记录 -->
    <div class="recent-practice">
      <h2 class="section-title">📝 最近练习记录</h2>
      <div class="practice-list">
        <div 
          v-for="record in recentPractice" 
          :key="record.id"
          class="practice-item"
        >
          <div class="practice-info">
            <div class="practice-category">{{ record.category }}</div>
            <div class="practice-title">{{ record.title }}</div>
            <div class="practice-meta">
              <span class="practice-score">得分: {{ record.score }}/{{ record.total }}</span>
              <span class="practice-time">{{ record.time }}</span>
            </div>
          </div>
          <div class="practice-actions">
            <button class="retry-btn" @click="retryPractice(record)">
              重新练习
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PracticeContent',
  data() {
    return {
      practiceStats: {
        totalQuestions: 156,
        correctRate: 85,
        streakDays: 7,
        avgTime: '3.2分钟'
      },
      recentPractice: [
        {
          id: 1,
          category: 'Vue.js',
          title: 'Vue组件通信练习',
          score: 8,
          total: 10,
          time: '2天前'
        },
        {
          id: 2,
          category: 'JavaScript',
          title: 'ES6语法练习',
          score: 9,
          total: 10,
          time: '3天前'
        },
        {
          id: 3,
          category: '算法',
          title: '数组操作练习',
          score: 7,
          total: 10,
          time: '5天前'
        }
      ]
    }
  },
  methods: {
    retryPractice(record) {
      this.$message.info(`重新练习: ${record.title}`)
      // 这里可以跳转到具体的练习页面
    }
  }
}
</script>

<style scoped>
.practice-content {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.entry-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.entry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.entry-card:nth-child(1) { 
  animation-delay: 0.1s; 
}

.entry-card:nth-child(2) { 
  animation-delay: 0.2s; 
}

.entry-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.entry-title {
  font-size: 1.3rem;
  color: #2c3e50;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.entry-desc {
  font-size: 1rem;
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0;
}

/* 练习统计 */
.practice-stats {
  margin-bottom: 40px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  display: block;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: #7f8c8d;
  font-weight: 500;
}

/* 最近练习记录 */
.recent-practice {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
}

.practice-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.practice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.practice-item:hover {
  border-color: #6c757d;
  background: rgba(108, 117, 125, 0.05);
  transform: translateX(5px);
}

.practice-info {
  flex: 1;
}

.practice-category {
  background: #6c757d;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 8px;
}

.practice-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.practice-meta {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  color: #7f8c8d;
}

.practice-score {
  color: #27ae60;
  font-weight: 600;
}

.practice-actions {
  margin-left: 20px;
}

.retry-btn {
  padding: 8px 16px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .practice-content {
    padding: 15px;
  }

  .page-title {
    font-size: 2rem;
  }

  .entry-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .practice-item {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .practice-actions {
    margin-left: 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
